<template>
  <div class="home">
    <dv-loading v-if="isLoding">Loading...</dv-loading>
    <!-- 头部 -->
    <div class="header">
      <div class="l">
        <dv-decoration-10 style="width: 500px; height: 5px" />
        <dv-decoration-8 style="width: 100px; height: 50px" />
      </div>
      <div class="c">
        <h2>大数据可视化平台</h2>
        <dv-decoration-5 style="width: 200px; height: 40px" />
      </div>
      <div class="r">
        <dv-decoration-8 :reverse="true" style="width: 100px; height: 50px" />
        <dv-decoration-10 style="width: 500px; height: 5px" />
      </div>
    </div>
    <!-- 平行四边形 -->
    <div class="con">
      <div class="l">
        <div class="ll">数据分析1</div>
        <div class="lll"><span>数据分析2</span></div>
      </div>
      <div class="r">
        <div class="rr">vue-big-screen</div>
        <div class="rrr"></div>
      </div>
    </div>
    <!-- echarts -->
    <div class="box">
      <div class="l1">
        <dv-border-box-12>
          <div class="top">
            <div class="tt">
              <span>任务通过率</span>
              <dv-decoration-3 style="width: 100px; height: 30px" />
            </div>
            <piechart></piechart>
            <div class="bb">
              <ul>
                <li>
                  <dv-digital-flop
                    :config="config1"
                    style="width: 100px; height: 40px"
                  />
                  <span>总共完成数量(件)</span>
                </li>
                <li>
                  <dv-digital-flop
                    :config="config1"
                    style="width: 100px; height: 40px"
                  />
                  <span>总共完成数量(件)</span>
                </li>
                <li>
                  <dv-digital-flop
                    :config="config1"
                    style="width: 100px; height: 40px"
                  />
                  <span>总共完成数量(件)</span>
                </li>
                <li>
                  <dv-digital-flop
                    :config="config1"
                    style="width: 100px; height: 40px"
                  />
                  <span>总共完成数量(件)</span>
                </li>
              </ul>
            </div>
          </div>
        </dv-border-box-12>
      </div>
      <div class="l2">
        <dv-border-box-12>
          <div class="top">
            <span>地图数据</span>
            <dv-decoration-3 style="width: 100px; height: 30px" />
          </div>
        </dv-border-box-12>
      </div>
      <div class="c1">
        <div class="t">
          <ul>
            <li>
              <span>今年累计任务次数</span>
              <dv-digital-flop
                :config="config1"
                style="width: 100px; height: 40px"
              />
            </li>
            <li>
              <span>本月累计任务次数</span>
              <dv-digital-flop
                :config="config2"
                style="width: 100px; height: 40px"
              />
            </li>
            <li>
              <span>今日累计任务次数</span>
              <dv-digital-flop
                :config="config3"
                style="width: 100px; height: 40px"
              />
            </li>
            <li>
              <span>今年失败任务次数</span>
              <dv-digital-flop
                :config="config4"
                style="width: 100px; height: 40px"
              />
            </li>
            <li>
              <span>今年成功任务次数</span>
              <dv-digital-flop
                :config="config5"
                style="width: 100px; height: 40px"
              />
            </li>
            <li>
              <span>今年达标任务次数</span>
              <dv-digital-flop
                :config="config6"
                style="width: 100px; height: 40px"
              />
            </li>
          </ul>
        </div>
        <div class="b">
          <div class="l">
            <p>年度负责人组件达标榜</p>
            <dv-scroll-ranking-board
              :config="config"
              style="width: 280px; height: 250px"
            />
          </div>
          <div class="r">
            <div class="r-t1">
              <div class="r-t-p1">
                <p>今日任务通过率</p>
                <dv-decoration-9 style="width: 90px; height: 90px"
                  >60%</dv-decoration-9
                >
              </div>
              <div class="r-t-p2">
                <p>今日任务达标率</p>
                <dv-decoration-9 style="width: 90px; height: 90px"
                  >46%</dv-decoration-9
                >
              </div>
            </div>
            <div class="r-t2">
              <dv-water-level-pond
                :config="con"
                style="width: 190px; height: 135px"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="r1">
        <div class="t">
          <p>产品销售渠道分析</p>
          <dv-capsule-chart :config="fig" style="width: 250px; height: 150px" />
        </div>
      </div>
      <div class="r2">
        <dv-border-box-13>
          <p>任务完成排行榜</p>
          <dv-scroll-board
            :config="contab"
            style="width: 280px; height: 340px"
          />
        </dv-border-box-13>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import piechart from "@/components/Piechart.vue";
export default {
  name: "",
  components: { piechart },
  mixins: [drawMixin],

  data() {
    return {
      contab: {
        header: ["组件", "分支", "覆盖率"],
        data: [
          ["行1列1", "行1列2", "46%"],
          ["行2列1", "行2列2", "46%"],
          ["行3列1", "行3列2", "46%"],
          ["行4列1", "行4列2", "46%"],
          ["行5列1", "行5列2", "46%"],
          ["行6列1", "行6列2", "46%"],
          ["行7列1", "行7列2", "46%"],
          ["行8列1", "行8列2", "46%"],
          ["行9列1", "行9列2", "46%"],
          ["行10列1", "行10列2", "46%"],
        ],
        index: true,
        columnWidth: [50],
        align: ["center"],
      },
      fig: {
        data: [
          {
            name: "南阳",
            value: 167,
          },
          {
            name: "周口",
            value: 67,
          },
          {
            name: "漯河",
            value: 123,
          },
          {
            name: "郑州",
            value: 55,
          },
          {
            name: "西峡",
            value: 98,
          },
        ],
      },
      con: {
        data: [66, 45],
        shape: "roundRect",
      },
      config: {
        data: [
          {
            name: "周口",
            value: 15 + "人",
          },
          {
            name: "南阳",
            value: 6 + "人",
          },
          {
            name: "西峡",
            value: 18 + "人",
          },
          {
            name: "驻马店",
            value: 16 + "人",
          },
          {
            name: "新乡",
            value: 10 + "人",
          },
          {
            name: "信阳",
            value: 15 + "人",
          },
          {
            name: "漯河",
            value: 4 + "人",
          },
        ],
      },
      isLoding: true,
      config1: {
        number: [120],
        toFixed: 1,
        content: "{nt}",
      },
      config2: {
        number: [18],
        toFixed: 1,
        content: "{nt}",
      },
      config3: {
        number: [2],
        toFixed: 1,
        content: "{nt}",
      },
      config4: {
        number: [14],
        toFixed: 1,
        content: "{nt}",
      },
      config5: {
        number: [106],
        toFixed: 1,
        content: "{nt}",
      },
      config6: {
        number: [100],
        toFixed: 1,
        content: "{nt}",
      },
    };
  },
  created() {
    this.loding();
  },
  mounted() {},
  methods: {
    loding() {
      setTimeout(() => {
        this.isLoding = false;
      }, 500);
    },
  },
};
</script>
<style scoped lang='scss'>
.home {
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #01050b;
  color: #fff;
  overflow: hidden;
  .header {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;

    .l {
      display: flex;
    }
    .c {
      text-align: center;
    }
    .r {
      display: flex;
      .dv-decoration-10 {
        transform: rotate(180deg);
      }
    }
  }
  .con {
    width: 100%;
    margin-top: -30px;

    display: flex;
    justify-content: space-between !important;
    .l {
      display: flex;
      .ll {
        width: 300px;
        background-color: #0d1328;
        transform: skew(160deg);
        padding: 5px;
        color: #113476;
      }
      .lll {
        background-color: #0d1328;
        width: 150px;
        padding: 5px;
        transform: skew(160deg);
        margin-left: 15px;
        text-align: center;
        color: #113476;
      }
    }
    .r {
      display: flex;
      text-align: center;
      .rr {
        padding: 5px;
        width: 150px;
        background-color: #115cdd;
        transform: skew(-30deg);
        margin-right: 15px;
      }
      .rrr {
        padding: 5px;
        width: 300px;
        background-color: #0d1328;
      }
    }
  }
  .box {
    margin-top: 5px;
    display: flex;
    align-items: center;
    .l1 {
      width: 20%;
      height: 400px;
      .dv-border-box-12 {
        padding: 10px;
        .top {
          .tt {
            display: flex;
          }
          span {
            margin-right: 10px;
          }
          .bb {
            font-size: 12px;
            margin-top: 10px;
            ul {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: center;
              text-align: center;
              li {
                width: 49%;
                padding: 5px;
              }
            }
          }
        }
      }
    }
    .l2 {
      width: 20%;
      height: 400px;
      .dv-border-box-12 {
        padding: 10px;
        .top {
          display: flex;
          align-items: center;
          span {
            margin-right: 10px;
          }
        }
      }
    }
    .c1 {
      height: 400px;
      width: 40%;
      .t {
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          font-style: 12px;
          li {
            width: 32%;
            background-color: #0c1426;
            margin: 2px;
            color: #0f3b80;
          }
        }
      }
      .b {
        padding: 5px 0;
        display: flex;
        .l {
          width: 60%;
          background-color: #0e152a;
        }
        .r {
          width: 40%;
          background-color: #0e152a;
        }
      }
      .r {
        .r-t1 {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
        }
      }
    }
    .r1 {
      width: 20%;
      .t {
        p {
          margin-top: -200px;
        }
      }
    }
    .r2 {
      width: 20%;
      height: 400px;
      .dv-border-box-13 {
        padding: 10px;
      }
    }
  }
}
</style>

